<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryParams"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item
        label-width="120px"
        label-position="left"
        label="项目名称"
        prop="crewName"
      >
        <el-input
          v-model="queryParams.repairName"
          placeholder="坞修项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label-width="120px" label-position="left">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <u-table
      ref="plTreeTable"
      v-loading="loading"
      fixed-columns-roll
      beautify-table
      header-drag-style
      :height="700"
      :treeConfig="{
        children: 'repairProjectWebVoList',
        expandAll: false,
      }"
      use-virtual
      row-id="repairProjectId"
      border
    >
      <u-table-column
        :tree-node="true"
        prop="projectNameCn"
        label="坞修项目(中文)"
        show-overflow-tooltip
      />
      <u-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip
      />
      <u-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleAdd(scope.row.parentId)"
          >
            添加本级
          </el-button>
          <el-button
            v-if="scope.row.isFinalLevel !== '1'"
            type="text"
            size="small"
            @click="handleAdd(scope.row.repairProjectId)"
          >
            添加子级
          </el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="handleDelete(scope.row)" v-if="!scope.row.repairProjectWebVoList || !Boolean(scope.row.repairProjectWebVoList.length)">
            删除
          </el-button>
        </template>
      </u-table-column>
    </u-table>

    <!-- 添加 -->
    <add
      v-if="dialogFlag"
      v-model="dialogFlag"
      :projectParent="projectParent"
      :editId="editId"
      :hasChild="hasChild"
      :dialogType="dialogType"
      @getList="getList"
    />
  </div>
</template>

<script>
import { delRepairProject, getRepairInfo } from "@/api/system/repairProject";
import add from "./add.vue";

let tableData = [];

export default {
  name: "RepairProject",
  components: { add },
  data() {
    return {
      modalTitle: "",
      dialogFlag: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 船员简历表格数据
      resumeList: [],
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        repairLargeCategoryId: null,
        repairName: null,
      },
      columns: [
        {
          prop: "projectNameEn",
          label: "坞修项目(英文)",
        },
      ],
      projectParent: null,
      editId: null,
      hasChild: false
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询维修项目列表 */
    getList() {
      this.loading = true;
      getRepairInfo()
        .then(({ data }) => {
          tableData = data;
          this.$refs.plTreeTable.reloadData(data);
          this.selectTreeData = data;
          // this.resumeList = rows;
          // this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 表单重置
    reset() {
      this.form = this.resetFormData(this.form);
      this.form.shipsTypeList = [];
      this.$nextTick(() => {
        // this.$refs["form"].resetFields()
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.getList();

      if (!this.queryParams.repairName) return;

      const rebuildData = (value, arr) => {
        let newarr = [];
        arr.forEach((element) => {
          if (
            element.projectName.indexOf(value) > -1 ||
            element.projectNameEn.indexOf(value) > -1
          ) {
            newarr.push(element);
          }

          if (
            element.repairProjectWebVoList &&
            element.repairProjectWebVoList.length
          ) {
            const ab = rebuildData(value, element.repairProjectWebVoList);
            const obj = {
              ...element,
              repairProjectWebVoList: ab,
            };
            if (ab && ab.length) {
              if (
                !newarr.find(
                  (item) => item.repairProjectId === obj.repairProjectId
                )
              ) {
                newarr.push(obj);
              }
            }
          }
        });
        return newarr;
      };

      const data = rebuildData(this.queryParams.repairName, tableData);
      // console.log(data);

      this.$refs.plTreeTable.reloadData(data);
      this.$refs.plTreeTable.setAllTreeExpansion();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = this.resetFormData(this.queryParams);
      // this.handleQuery();
      this.getList();
    },

    // 添加
    handleAdd(projectParent) {
      this.dialogType = "add";
      this.dialogFlag = true;
      this.projectParent = projectParent;
    },

    // 编辑
    handleEdit(row) {
      this.dialogType = "edit";
      this.dialogFlag = true;
      this.editId = row.repairProjectId;
      this.hasChild = Boolean(row.repairProjectWebVoList?.length)
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRepairProject(row.repairProjectId).then((res) => {
            this.$modal.msgSuccess("操作成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
